import {Button, message, Select} from 'antd';
import React, {useState, useRef, useEffect, Component} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {stockList, exportRecord,delStock} from './service';
import {DownloadOutlined} from '@ant-design/icons';
import Access from '@/components/Access/Access';

import CreateForm from "./components/CreateForm";

import "./index.css";


import styles from "@/global.less";

import {saveFileAs} from "@/utils/utils";

const TableList = (props) => {
  const actionRef = useRef();
  const [count, setCount] = useState();

  const [exportModalVisible, handleModalVisible] = useState(false);

  useEffect(() => {

  }, []);


  const columns = [
    {
      title: '品名',
      dataIndex: 'goodsName',
    },
    {
      title: '分类',
      dataIndex: 'categoryName',
    },
    {
      title: '条码',
      dataIndex: 'barCode',
    },
    {
      title: '仓库',
      dataIndex: 'houseName',
      hideInSearch: true,
    },
    {
      title: '仓库',
      dataIndex: 'bizType',
      hideInTable: true,
      valueEnum: {
        1: {
          text: '化肥',
          status: 'Success',
        },
        2: {
          text: '超市',
          status: 'Success',
        },
        3: {
          text: '原料',
          status: 'Success',
        },
        4: {
          text: '其他',
          status: 'Success',
        },
      },
    },
    {
      title: '库存',
      dataIndex: 'stock',
      hideInSearch: true,
    },
    {
      title: '占用库存',
      dataIndex: 'robStock',
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      fixed: 'right',
      render: (_, item) => {
        return <>
          {
            item.stock === 0 ? (
              <>
                <Access accessKey={"@stockList_delStock"}>
                  <Button
                    type="primary"
                    style={{
                      marginLeft: "10px"
                    }}
                    onClick={() => {
                      delStock({
                        id:item.id
                      }).then(res=>{
                        if (res?.code === 0) {
                          message.info("删除成功");
                        }
                        actionRef.current.reload();
                      })
                    }}
                  >
                    删除
                  </Button>

                </Access>

              </>
            ):null
          }

        </>
      }
    }
  ];
  const outColumns = [
    {
      title: '类型',
      dataIndex: 'type',
      valueType: 'text',
      renderFormItem: () => {
        return (
          <Select placeholder="请选择类型" allowClear>
            <Select.Option value={1} key="化肥">
              化肥
            </Select.Option>
            <Select.Option value={2} key="超市">
              超市
            </Select.Option>
            <Select.Option value={3} key="原料">
              原料
            </Select.Option>
            <Select.Option value={4} key="其他">
              其他
            </Select.Option>
          </Select>
        );
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '类型为必填项',
          },
        ],
      },
    },
  ];

  return (
    <PageContainer>
      <ProTable
        headerTitle="库存列表"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        scroll={{x: 1400}}
        bordered
        request={(params, sorter, filter) => stockList({...params, sorter, filter})}
        postData={(payload) => {
          const {list, total} = payload;
          setCount(total);
          return list || [];
        }}
        toolBarRender={() => [
          <Access accessKey={"@stockList_export"}>
            <Button
              key="stockList_export"
              type="primary"
              onClick={() => {
                handleModalVisible(true);
              }}
            >
              <DownloadOutlined/> 导出
            </Button>
          </Access>

        ]}
        columns={columns}
        pagination={{
          defaultPageSize: 30,
          showSizeChanger: false,
          showTitle: false,
          total: count,
          showTotal: (total) => `共${total}条`,
        }}
      />
      <CreateForm
        title={'导出信息'}
        width={800}
        btn_view={null}
        onCancel={() => {
          handleModalVisible(false);
        }}
        modalVisible={exportModalVisible}
      >
        <ProTable
          className={styles.formModal}
          onSubmit={(value) => {
            handleModalVisible(false);
            exportRecord(value).then(res=>{
              if (res){
                saveFileAs(res, '库存记录');
              }
            })
          }}
          rowKey={r=>r.id}
          bordered
          type="form"
          columns={outColumns}
          form={{
            layout: 'horizontal ',
            labelAlign: 'rihgt',
            labelCol: {span: 8},
            wrapperCol: {span: 24},
          }}
        />
      </CreateForm>
    </PageContainer>
  );
};

export default TableList;
